<template>
  <div>
       <!-- 头部返回按钮 -->
       <div class="header-box">
          <div class="text-box" @click="okk">
          <i class="iconfont icon-back"></i>
          <span class="text1">
            <i class="iconfont icon-fanhui"></i>
            护工详细信息
            </span>
       </div>
      </div>

      <!-- 护工照片 -->
         <!-- body -->
   <div class="img">
     <img class="img" alt="announce_one" :src="detail.top_img">
   </div>

   <!-- 护工名字和所在医院 -->
   <div class="tip-nurse-info">
        <div class="nurse-name">{{detail.realname}}</div>
        <div class="nurse-medic">{{detail.college}}</div>
   </div>

   <!-- basic-info-box -->
   <div class="total-basic">
    <div class="basic-info-box">
        <div class="score">    4.9评分·216条评价</div>
        <div class="mojor">    {{detail.subject}} {{detail.experience}}年经验</div>
        <div class="goodFor">    擅长：{{detail.specialty}}</div>
    </div>
   </div>

   <!-- 可选择上门时间 -->

    <!-- 选择上门时间 -->
    <div class="total-time">
        <div class="choose-time-tip">上门时间</div>
          <div class="sky">
            <div class="up">
              <div class="medic-visit">{{detail.door_time}}
                <div class="text"></div>
              </div>
            </div>

          </div>
     </div>
      <!-- 电话 -->
      <div class="phone-tip">
        <div class="left-phone">{{detail.account}}</div>
        <div class="right-name">电话
          <i class="iconfont icon-dianhua"></i>
        </div>
      </div>

      <!-- 预定 -->
      <div class="yuding">
        <div class="left-price">￥{{detail.price}}</div>
        <div class="right-but" @click="bookNurse">预定</div>
      </div>

          <!-- 过渡条 -->
    <div class="transit"></div>

      <div class="user-comment">用户评价</div>
      <!-- 用户评论111111111111111111111 -->
      <div class="inurse">
         <!-- 左边是头像 -->
         <div class="left-icon">
            <i class="iconfont icon-yonghu1" style="color:rgb(18,150,219)"></i>
         </div>
         <!-- 右边是文字 -->
         <div class="right-text">
           <!-- 文字上面是名字和时间 -->
           <div class="up">
             <div class="name">匿名用户</div>
             <div class="time">5月20日</div>
           </div>
           <!-- 文字下面显示交流的信息 -->
           <div class="down">
             <div class="communication">护士上门服务真的挺好的，护士小姐姐很有礼貌，也很细心的照顾老人家，感谢！！</div>
           </div>
         </div>
       </div>

        <!-- 用户评论222222222222222222222 -->
      <div class="inurse">
         <!-- 左边是头像 -->
         <div class="left-icon">
            <i class="iconfont icon-yonghu1" style="color:rgb(18,150,219)"></i>
         </div>
         <!-- 右边是文字 -->
         <div class="right-text">
           <!-- 文字上面是名字和时间 -->
           <div class="up">
             <div class="name">匿名用户</div>
             <div class="time">5月20日</div>
           </div>
           <!-- 文字下面显示交流的信息 -->
           <div class="down">
             <div class="communication">节假日护士们也依旧敬业的上班，老人家发病急需人照顾的时候，也能立刻派护士到家里来帮照顾我奶奶，太棒了</div>
           </div>
         </div>
       </div>

      <!-- 过渡 -->
      <div class="transit-bottom"></div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      detail: ''

    }
  },
  created () {
    const id = localStorage.getItem('hugong_id')
    this.$http.get('/geYihuDetail/' + id).then(res => {
      console.log(res.data[0])
      this.detail = res.data[0]
    })
  },
  methods: {
    okk () {
      this.$router.go(-1)// 返回上一层
    },
    bookNurse () {
      this.$router.push({
        name: 'bookNurse',
        params: {
          id: this.detail.id,
          door_time: this.detail.door_time
        }
      })
    }
  }
}
</script>

<style scoped>
.header-box{
  height: 1.5rem;
  width: 100%;
  /* background:rgb(255, 204, 153); */
  background:rgb(255, 204, 153);
}
.text-box{
  padding-top:4%;
  font-size:0.55rem;
  color:white
}
.iconfont{
  font-size: 0.55rem;
}
.transit{
  height: 8px;
  width: 100%;
  background:rgb(242, 242, 242);
}
.img{
  max-height: 280px;
  width:100%;
  text-align: center;
  margin-bottom:10px;
  margin:2%;
  min-width: 90%;
  width: 95%;

}
.tip-nurse-info{
  margin:5%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 0.02rem solid gray;

}
.tip-nurse-info .nurse-name{
  font-size: 0.6rem;
  font-weight: bold;
  margin-bottom: 3%;
}
.tip-nurse-info .nurse-medic{
  font-size: 0.35rem;
  color: rgb(107, 132, 247);
  margin-bottom: 3%;
}
/* 基本信息 */
.total-basic{
   border-bottom: 0.02rem solid gray;
}
.basic-info-box{
  padding:1%;
  margin-left: 5%;
}
.basic-info-box .score{
  font-size: 0.45rem;
  font-weight: bold;
  /* background: rgb(236, 246, 235); */
  color: rgb(99, 138, 73);
  margin-bottom: 3%;

}
.basic-info-box .mojor{
  font-size: 0.45rem;
  font-weight: bold;
  /* background: #f6f3ea; */
  color: rgb(104, 73, 21);
  margin-bottom: 3%;
}

.basic-info-box .goodFor{
  font-size: 0.45rem;
  font-weight: bold;
  /* background: rgb(243, 243, 243); */
  color: rgb(169, 169, 169);
  margin-bottom: 3%;
}
/* 时间预约 */
.total-time{
  border-bottom: 0.02rem solid gray;
  /* margin-bottom: 4%; */
}
.sky{
  display: flex;
  margin-left: 7%;
  align-items: center;
  margin-bottom: 4%;
  /* border-bottom: 0.02rem solid gray; */
}
.choose-time-tip{
  margin:5% 0 2% 5%;
  font-weight: bold;
  font-size: 0.43rem;

}
.sky .up{
  margin:1%;
}
.sky .down{
  margin:1%;
}
.up .medic-visit{
  margin-top:5%;
  border: 1px solid rgb(218, 209, 209);
  border-radius: 10px;
  padding:0.2rem;
}
.up .hospial-recommend{
  margin-top:5%;
  border: 1px solid rgb(218, 209, 209);
  border-radius: 10px;
  padding:0.2rem
}
.down .online-inquery{
  margin-top:5%;
  border: 1px solid rgb(218, 209, 209);
  border-radius: 10px;
  padding:0.2rem
}
.down .refer-nearby{
  margin-top:5%;
  border: 1px solid rgb(218, 209, 209);
  border-radius: 10px;
  padding:0.2rem
}
.phone-tip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.02rem solid gray;
}
.phone-tip .left-phone{
  margin:5%;
  font-size: 0.5rem;
  font-weight: bold;

}
.phone-tip .right-name{
  margin-right: 5%;
  font-size: 0.35rem;
}
.phone-tip .right-name .iconfont{
  color: rgb(255,108,108);
  font-size: 0.5rem;
  font-weight: bold;
}
/* 预定 */
.yuding{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3%;
  margin-bottom: 3%;
}
.yuding .left-price{
  font-size: 0.5rem;
  margin-left: 10%;
  color: brown;
}
.yuding .right-but{
  font-size: 0.5rem;
  margin-right: 10%;
}
.yuding .delete{
  color: black;
  font-size: 0.35rem;

}
.yuding .right-but{
  vertical-align: top;
  color: #fff;
  /* background: #813f44; */
  background: rgb(236,101,110);
  border-radius: 4px;
  font-size: 14px;
  padding: 2%;
  width: 20%;
  text-align: center;
}

/* 用户评论 */
.inurse{
  display: flex;
  margin-bottom: 1%;
  border-bottom: 0.001rem solid rgb(233, 221, 221);
  margin-top:5%;
  width: 100%;
}

.inurse .left-icon .iconfont{
  font-size: 1rem;
  margin-left: 10px;
  color: rgb(116,157,236);
}

.inurse .right-text .up{
  margin:3%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.45rem;
}
.up .name{
  font-size: 0.4rem;
}
.up .time{
  font-size: 0.35rem;
  color: black;
}
.down .communication{
  color: black;
  /* margin-left: 2%; */
  text-align:justify;
  margin-right: 20px;
}
.user-comment{
  font-size: 0.45rem;
  font-weight: bold;
  margin:5%
}
/* -----------------------------end--------------------------- */
/* 底部缓冲过度 */
.transit-bottom{
  height: 30px;
  width: 100%;
}
</style>
